<template>
  <div class="orderConfirm orderLayout">
    <div class="content">
      <div class="member-info" v-if="operatorId != '255'">
        <div class="avatar">
          <ul>
            <li class="avatarImg">
              <img
                src="http://cdn.gee4.cn/zw-wx/wx-vue-img-v2/img/avatar.png"
                alt=""
              />
            </li>
          </ul>
        </div>
        <div class="info" :class="{ null: addressList.length == 0 }">
          <ul v-if="addressList.length > 0" @click="addAddress()">
            <li class="name">{{ addressList[0].receivingPerson }}</li>
            <li>
              <img
                src="http://cdn.gee4.cn/zw-wx/wx-vue-img-v2/img/phone.png"
              /><span>{{ addressList[0].receivingPhone }}</span>
            </li>
            <li>
              <img
                src="http://cdn.gee4.cn/zw-wx/wx-vue-img-v2/img/address2.png"
              /><span
                >{{ addressList[0]["area"]
                }}{{ addressList[0]["detailAddress"] }}</span
              >
            </li>
          </ul>
          <ul v-else @click="addAddress()">
            <p>请完善地址信息</p>
          </ul>
        </div>
      </div>

      <div class="shadowBox productInfo">
        <!-- <div class="banner">
          <img src="http://cdn.gee4.cn/zw-wx/wx-vue-img-v2/img/cp/banner.png" />
        </div> -->
        <div class="title">
          <!-- <p>【普莱】欧米伽3胶囊</p> -->
          <p>{{ name }}</p>
        </div>
        <div class="detail">
          <div class="purchaseNum">
            <div>
              <p>
                购买数量
                <span
                  style="font-size: 10px"
                  v-if="from == 'insider' && insiderName"
                >
                  (剩余可购数量：{{ this.insiderAvailableQuota }})
                </span>
              </p>
            </div>
            <div
              style="
                display: flex;
                justify-content: flex-end;
                align-items: center;
              "
            >
              <!-- <img
                src="http://cdn.gee4.cn/zw-wx/wx-vue-img-v2/img/decre.png"
                @click="reduceNum()"
              /> -->
              <input type="text" disabled name="" v-model="num" />
              <!-- <img
                src="http://cdn.gee4.cn/zw-wx/wx-vue-img-v2/img/incre.png"
                @click="increaseNum()"
              /> -->
            </div>
          </div>
          <div class="purchaseNum" v-if="pType == 1 || pType == 2">
            <div>
              <p>购买规格</p>
            </div>
            <div
              style="
                display: flex;
                justify-content: flex-end;
                align-items: center;
              "
            >
              <div class="p-type" v-if="pType == 2">EPA</div>
              <div class="p-type" v-if="pType == 1">欧米伽3</div>
            </div>
          </div>
        </div>
      </div>
      <div class="shadowBox flexBox">
        <div>
          <p>支付配送</p>
        </div>
        <div>
          <ul style="text-align: right">
            <li>
              <p>快递运输</p>
            </li>
            <li class="small-info">工作日、双休日与节假日均可送货</li>
          </ul>
        </div>
      </div>
      <div class="shadowBox flexBox">
        <div>
          <p>备注</p>
        </div>
        <div>
          <ul style="text-align: right">
            <textarea
              v-model="userComment"
              rows="2"
              cols="30"
              style="padding: 2px"
              placeholder="请填写备注信息"
            ></textarea>
          </ul>
        </div>
      </div>
      <div class="shadowBox flexBox" @click="selectPayWay()">
        <div>
          <p>支付方式</p>
        </div>
        <div>
          <p
            :class="{ 'toggle-up': payWayToggle, 'toggle-down': !payWayToggle }"
          >
            {{
              payWay == "online"
                ? "微信支付"
                : isPayWay == "offline400"
                ? "货到付款"
                : "其他方式"
            }}
          </p>
        </div>
      </div>
      <div class="toggle-item" v-show="payWayToggle">
        <ul>
          <li @click="updatePayWay('online')">
            <span class="radioBox" :class="{ active: payWay == 'online' }">
              <input
                type="radio"
                name="payWay"
                value="online"
                v-model="payWay"
              />
            </span>
            <span>微信支付</span>
          </li>
          <li @click="updatePayWay('100')">
            <span class="radioBox" :class="{ active: isPayWay == 'offline' }">
              <input
                type="radio"
                name="payWay"
                value="offline"
                v-model="payWay"
              />
            </span>
            <span>其他方式</span>
          </li>
          <div class="offlinePayWay" v-show="isPayWay == 'offline'">
            <div class="box">
              <span
                class="radioBox"
                :class="{ active: offlinePayWay == '100' }"
              >
                <input
                  type="radio"
                  name="offlinePayWay"
                  value="100"
                  v-model="offlinePayWay"
                />
              </span>
              <div>
                <p>现金</p>
              </div>
            </div>
            <div class="box">
              <span
                class="radioBox"
                :class="{ active: offlinePayWay == '300' }"
              >
                <input
                  type="radio"
                  name="offlinePayWay"
                  value="300"
                  v-model="offlinePayWay"
                />
              </span>
              <div>
                <p>支付宝</p>
                <p>请打款到支付宝账号：</p>
                <p>zhipuswkj@163.com</p>
                <p>账户名称：</p>
                <p>脂谱生物科技（上海）有限公司</p>
                <p style="display: inline-block" v-if="offlinePayWay == '300'">
                  <label style="color: red; margin-left: 0">转账人姓名:</label>
                  <input
                    type="text"
                    style="padding: 2px; display: inline-block"
                    v-model="transferPerson"
                    placeholder="请输入姓名"
                  />
                </p>
              </div>
            </div>
            <div class="box">
              <span
                class="radioBox"
                :class="{ active: offlinePayWay == '500' }"
              >
                <input
                  type="radio"
                  name="offlinePayWay"
                  value="500"
                  v-model="offlinePayWay"
                />
              </span>
              <div>
                <p>银行转账</p>
                <p>账号：</p>
                <p>435179171193</p>
                <p>公司名称：</p>
                <p>脂谱生物科技（上海）有限公司</p>
                <p>开户银行：</p>
                <p>中国银行上海市菊园新区支行</p>
                <p style="display: inline-block" v-if="offlinePayWay == '500'">
                  <label style="color: red; margin-left: 0">转账人姓名:</label>
                  <input
                    type="text"
                    style="padding: 2px"
                    v-model="transferPerson"
                    placeholder="请输入姓名"
                  />
                </p>
              </div>
            </div>
          </div>
        </ul>
      </div>
      <div class="shadowBox flexBox" @click="selectIsTax()">
        <div>
          <p>发票信息</p>
        </div>
        <div>
          <p :class="{ 'toggle-up': isTaxToggle, 'toggle-down': !isTaxToggle }">
            {{ isTax == "0" ? "不开发票" : "开发票" }}
          </p>
        </div>
      </div>
      <div class="toggle-item" v-show="isTaxToggle">
        <ul>
          <li>
            <span class="radioBox" :class="{ active: isTax == '0' }">
              <input type="radio" name="isTax" value="0" v-model="isTax" />
            </span>
            <span>不开发票</span>
          </li>
          <li>
            <span class="radioBox" :class="{ active: isTax == '1' }">
              <input type="radio" name="isTax" value="1" v-model="isTax" />
            </span>
            <span>开发票</span>
          </li>
          <li v-show="isTax == '1'">
            <span>如需开发票请联系客服，4008813468</span>
          </li>
        </ul>
      </div>
      <div class="shadowBox" style="margin-bottom: 1.1rem; padding: 0 0.6rem">
        <div class="flexBox scoreBox">
          <div>
            <p>商品总额</p>
          </div>
          <div>
            <p>
              <span>&yen;</span> {{ totalPrice }}
              <span style="color: #b7bcb8">
                ( <span class="origin">&yen;{{ totalOriginalPrice }}</span> )
              </span>
            </p>
          </div>
        </div>
      </div>
    </div>
    <div class="fixnav">
      <div class="info">
        <div>
          <span>实付</span>
        </div>
        <div>
          <ul>
            <li class="amount">
              <span>&yen;</span> {{ totalPrice }}
              <span
                style="color: #b7bcb8"
                v-if="totalPrice != totalOriginalPrice"
              >
                (
                <span class="origin">&yen;{{ totalOriginalPrice }}</span>
                )
              </span>
            </li>
            <!-- <li class="tips" v-if="rate==0.7">7折</li>
            <li class="tips" v-if="rate==0.6">6折</li> -->
          </ul>
        </div>
      </div>
      <div class="btn" @click="pay()">
        <span>去结算</span>
      </div>
    </div>
  </div>
</template>
<script>
import { Toast, MessageBox, Indicator } from "mint-ui";
import { mapGetters, mapActions } from "vuex";
import { showPay } from "service/wxpayment";
import { wxshare } from "common/mixin";

export default {
  mixins: [wxshare],
  data() {
    return {
      num: this.$route.query.num,
      price: this.$route.query.price,
      insiderPrice: this.$route.query.insiderPrice,
      from: this.$route.query.from,
      rate: this.$route.query.rate,
      insiderAvailableQuota: this.$route.query.insiderAvailableQuota,
      payWay: "online",
      scoreInfo: {},
      isTax: 0,
      activityPoint: 0,
      puchasePoint: 0,
      comment: "",
      isUsePointTemp: 0,
      puchasePoint: 0,
      isSubmit: false,
      addressList: [],
      offlinePayWay: "100",
      isGettingAddress: true,
      giftNum: 0,
      payWayToggle: true,
      isTaxToggle: false,
      allPurchasePoint: 0,
      transferPerson: "",
      userComment: "",
      operatorId: this.$route.query.operatorId,
      totalPrice: this.$route.query.num * this.$route.query.insiderPrice,
      totalOriginalPrice: this.$route.query.num * this.$route.query.price,
      pType: this.$route.query.pType,
      name: this.$route.query.name,
    };
  },
  computed: {
    ...mapGetters(["phone", "insiderName"]),
  },
  methods: {
    ...mapActions({
      GetScore: "GetScore",
      GetVisibleCredit: "GetVisibleCredit",
      CreateOrder: "CreateOrder",
      GetDeliveryInfo: "GetDeliveryInfo",
      GetPayCharge: "GetPayCharge",
    }),
    addAddress: function () {
      this.$router.push({ path: "/newAddress" });
    },
    sucCb() {
      this.$router.push({ path: "/orderSucc" });
    },
    errCb() {
      this.$router.push({ path: "/orderErr" });
    },
    selectPayWay: function () {
      this.payWayToggle = !this.payWayToggle;
    },
    selectIsTax: function () {
      this.isTaxToggle = !this.isTaxToggle;
    },
    pay: function () {
      let self = this;
      if (self.isSubmit) {
        return false;
      } else {
        self.isSubmit = true;
      }
      if (self.operatorId != "255") {
        if (!self.addressList[0]) {
          MessageBox.alert(
            "您还没有填写收货地址，请填写。",
            "没有收货地址"
          ).then(() => {
            this.$router.push({ path: "/newAddress" });
          });
          return false;
        }
      }
      if (
        !self.transferPerson &&
        (self.offlinePayWay == 500 || self.offlinePayWay == 300)
      ) {
        MessageBox.alert("您还没有填写转账人姓名，请填写。", "没有转账人姓名");
        self.isSubmit = false;
        return;
      }
      self.isSubmit = true;
      let isInsider = this.insiderName && this.from == "insider";
      let option = {
        payType: self.payWay == "online" ? 200 : self.offlinePayWay,
        isInvoice: self.isTax == "0" ? false : true,
        receivingPerson: self.addressList[0]
          ? self.addressList[0].receivingPerson
          : "",
        receivingPhone: self.addressList[0]
          ? self.addressList[0].receivingPhone
          : "",
        detailAddress: self.addressList[0]
          ? self.addressList[0].area + self.addressList[0].detailAddress
          : "",
        userComment: self.userComment,
        transferPerson: self.transferPerson,
        isInsider: isInsider,
        items: [
          {
            pId: self.$route.query.pid,
            quantity: self.num,
          },
        ],
        credit: self.isUsePoint,
      };
      Indicator.open();
      this.CreateOrder(option).then(
        (result) => {
          Indicator.close();
          if (self.payWay == "offline") {
            MessageBox.alert(
              "恭喜您创建线下订单成功，线下支付成功后即可获得产品。",
              "下单成功"
            ).then(() => {
              // this.$router.push({ path: 'orderList' });
              location.href = "/order/orderList";
            });
          } else if (result.data.realAmount == 0) {
            MessageBox.alert(
              "恭喜您使用积分购买成功成功，您可以在订单中心查看您的订单。",
              "下单成功"
            ).then(() => {
              // this.$router.push({ path: 'orderList' });
              location.href = "/order/orderList";
            });
          } else {
            self.isSubmit = false;
            this.GetPayCharge({
              orderId: result.data.orderId,
            }).then(
              (res) => {
                showPay(res, self.sucCb, self.errCb);
              },
              (err) => {}
            );
            //调支付
          }
        },
        (error) => {
          console.log("error===", error);
          Toast("订单创建失败！");
          self.isSubmit = false;
        }
      );
    },
    updatePayWay: function (val) {
      if (val == "100") {
        this.offlinePayWay = 100;
      } else {
        this.payWay = val;
      }
    },
    reduceNum: function () {
      if (this.num > 1) {
        this.num = parseInt(this.num) - 1;
      }
    },
    increaseNum: function () {
      this.num = parseInt(this.num) + 1;
    },
  },
  watch: {
    // num: function (newVal) {
    //   if (newVal > 5) {
    //     this.totalPrice = (this.price * newVal * 0.8).toFixed(1);
    //   } else {
    //     this.totalPrice = parseInt(this.price * newVal);
    //   }
    //   this.totalOriginalPrice = parseInt(this.price * newVal);
    // },
  },
  computed: {
    ...mapGetters(["phone", "insiderName"]),
    isUsePoint: function () {
      if (this.price * this.num > this.puchasePoint) {
        if (this.isUsePointTemp > this.puchasePoint) {
          this.isUsePointTemp = this.puchasePoint;
          return this.puchasePoint;
        } else {
          return this.isUsePointTemp;
        }
      } else {
        if (this.isUsePointTemp > this.price * this.num) {
          this.isUsePointTemp = this.price * this.num;
          return this.price * this.num;
        } else {
          return this.isUsePointTemp;
        }
      }
    },
    isPayWay: function () {
      if (this.payWay == "offline" && this.offlinePayWay == "400") {
        return "offline400";
      } else if (this.payWay == "offline") {
        return "offline";
      }
    },
    saveData: function () {},
  },
  mounted() {
    //缓存数据获取
    // if (sessionStorage.getItem('order_confirm_data')) {
    //   let beifen = sessionStorage.getItem('order_confirm_data');
    //   var _data = JSON.parse(beifen);
    //   Object.assign(this, _data, { isSubmit: false });
    // }

    this.giftNum = parseInt(this.num / 10) * 2;
    this.GetDeliveryInfo().then(
      (result) => {
        console.log("GetDeliveryInfo", result);
        this.addressList = result.data.slice(0);
        this.isGettingAddress = false;
      },
      (reason) => {
        this.isGettingAddress = false;
      }
    );
    this.GetScore().then((result) => {
      console.log("result", result);
      this.puchasePoint = result.data.puchasePoint;
      this.activityPoint = result.data.activityPoint;
      this.puchasePoint = result.data.puchasePoint;
      this.isUsePointTemp = result.data.puchasePoint;
    });
    this.GetVisibleCredit().then((result) => {
      console.log("result", result);
      this.allPurchasePoint = result.data.puchasePoint;
    });
  },
  beforeDestroy() {
    // sessionStorage.setItem('order_confirm_data', JSON.stringify(this._data));
  },
};
</script>
<style lang="less">
@import "./orderConfirm.less";
@import "./orderPre.less";
</style>
